<template>
<xdh-panel class="relative-case-block" theme="primary" title="关联案件" shadow size="small">
  <div class="relative-case">
    <div class="relative-case-top">
      <div class="title">天元区张三丰被盗窃案</div>
      <el-tag class="status" type="danger" size="mini">标签五</el-tag>
      <div class="id">
        案件编号： <span>A440607201611091244411</span>
      </div>
      <div class="tags">
        <edit-tags height="28px"></edit-tags>
      </div>
    </div>
    <div class="key-value-infos-table">
      <div class="table-item quarter" v-for="item in caseInfo" :key="item.prop">
        <strong class="label">{{item.label}}</strong><span class="value">{{item.value}}</span>
      </div>
    </div>
    <div class="case-desc">
      <input class="show-more" type="checkbox" id="showMore" />
      <label class="more-btn" for="showMore"></label>
      <div class="description">
        <em>案情简要：</em>2016/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案 &&& 2016/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案
      </div>
      
    </div>
  </div>

  <div class="relative-case">
    <div class="relative-case-top">
      <div class="title">天元区张三丰被盗窃案</div>
      <el-tag class="status" type="danger" size="mini">标签五</el-tag>
      <div class="id">
        案件编号： <span>A440607201611091244411</span>
      </div>
      <div class="tags">
        <edit-tags height="28px"></edit-tags>
      </div>
    </div>
    <div class="key-value-infos-table">
      <div class="table-item quarter" v-for="item in caseInfo" :key="item.prop">
        <strong class="label">{{item.label}}</strong><span class="value">{{item.value}}</span>
      </div>
    </div>
    <div class="case-desc">
      <input class="show-more" type="checkbox" id="showMore0002" />
      <label class="more-btn" for="showMore0002"></label>
      <div class="description">
        <em>案情简要：</em>2016/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案 &&& 2016/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案
      </div>
    </div>
  </div>
</xdh-panel>    
</template>

<style lang="scss" scoped>
@import "../../../../src/style/_vars.scss";
.relative-case{
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid $--border-color-base;
  &-top{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: bold;
      margin-right: 10px;
    }
    .status{
      margin-right: 10px;
    }
    .id{
      margin-right: 10px;
    }
    .tags{
      flex: 1;
      height: 28px;
    }
     
  }
  .case-desc{
    position: relative;
    padding-top: 5px;
    padding-right: 20px;
    border-top: 1px solid $--border-color-base;
    .description{
      height: 60px;
      display: -webkit-box;
      overflow : hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
       
    }
    .show-more{
      display: none;
    }
    .show-more:checked ~ .description{
      height: auto;
      display:block;
    }
    .more-btn{
      position: absolute;
      right: -8px;
      bottom: -3px;
      color: $--color-primary; 
    }
    .more-btn:before{
      content: '更多';
    }
    .show-more:checked + .more-btn:before{
      content: '收起';
    }
  }
}
</style>

<script>
import XdhPanel from '@/widgets/xdh-panel'
import EditTags from '@/components/common/edit-tags'
export default {
  name: 'relativeCase',
  components: {
    XdhPanel,
    EditTags
  },
  props: {
  },
  data() {
    return {
      caseInfo: [
        {prop: 'character', label: '案件性质', value: '入户盗窃'},
        {prop: 'type', label: '案件类别', value: '盗窃案'},
        {prop: 'startTime', label: '发案时间', value: '2016-11-10 至2016-11-13'},
        {prop: 'lost', label: '损失价值（人民币元）', value: '2万'},
        {prop: 'acceptTime', label: '受理时间', value: '2016-11-12  15:04'},
        {prop: 'acceptDep', label: '受理单位', value: '湖南省株洲市xx刑侦大队'},
        {prop: 'district', label: '发案地行政区划', value: '株洲庐阳区'},
        {prop: 'victim', label: '死亡/受伤人数', value: '0/2'},
        {prop: 'investTime', label: '立案时间', value: '2016-11-12  15:04'},
        {prop: 'investDep', label: '立案单位', value: '湖南省株洲市xx刑侦大队'},
        {prop: 'caseSpot', label: '发案地点', value: '株洲市庐阳区XX街道XX小区'},
        {prop: 'involvePlace', label: '涉案场所', value: '合肥市庐阳区XX街道XX小区'},
        {prop: 'caseClass', label: '组织形式', value: '共同作案'},
        {prop: 'actionType', label: '行为特点', value: 'XXXXXXX,XXXXXXX'},
        {prop: 'area', label: '作案范围', value: 'XXXXXXX'},
        {prop: 'explore', label: '试探方式', value: 'XXXXXXX'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>
